<template>
    <el-row class="tac">
        <el-col :span="12">
            <el-menu active-text-color="#409eff" background-color="#304156" class="el-menu-vertical-demo"
                :default-active="ActiveIndex" text-color="#fff" @open="handleOpen" @close="handleClose" unique-opened
                router>
                <el-menu-item index="/index">
                    <i class="iconfont homepage"></i>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu :index="`/${item.name}`" v-for="item in userStore.activeMenus" :key="item.id">
                    <template #title>
                        <i class="iconfont" :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item :index="`/${item.name}/${el.name}`" v-for="el in item.children">
                        <i class="iconfont" :class="el.icon"></i>
                        <span>{{ el.title }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">


import { useUserStore } from "@/store/user/index"
import { ElRow, ElCol, ElMenu, ElMenuItem, ElSubMenu } from "element-plus";
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

const userStore = useUserStore()
const route = useRoute()

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
let ActiveIndex = ref('/index')
// onMounted(() => {
//     ActiveIndex.value = route.path
// })
watchEffect(() => {
    ActiveIndex.value = route.path
})

</script>

<style lang="less" scoped>
.el-menu-vertical-demo {
    width: 200px;
    border: none;
}
</style>